<template>
  <div class="song">
    <div class="list">
      <ul>
        <li v-for="(item, index) in songs" :key="index">
          <div
            style="
              width: 370px;
              display: flex;
              align-items: center;
              overflow: hidden;
            "
          >
            <a
              @click="getid(item.id, item.name, item)"
              class="btn"
              href="javascript:;"
            ></a>
            <a
              @click="getid(item.id, item.name, item)"
              class="username"
              href="javascript:;"
              >{{ item.name }}</a
            >
            <!-- <span v-if='item.tns !== ""' style='color: #aeaeae; font-size: 12px'>-({{ item.ar[0].name }})</span> -->
            <router-link :to="'/mv/' + item.mv">
              <a v-if="item.mv !== 0" class="mv" href="javascript:;"></a>
            </router-link>
          </div>

          <div class="set">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
          </div>
          <a class="name" href="javascript:;">
            <span style="color: #0c73c2">
              {{ item.ar[0].name }}
            </span>
            <span v-if="item.ar.length === 2"> /{{ item.ar[1].name }} </span>
          </a>
          <a href="javascript:;" class="album">《{{ item.al.name }}》</a>
          <span style="font-size: 12px" class="time">{{ item.dt | time }}</span>
        </li>
      </ul>
    </div>

    <!-- 分页 -->
    <div v-if="songs !== ''" class="next">
      <el-pagination
        @current-change="change"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      songs: '',
      limit: 30,
      total: 0,
      searchName:''
    }
  },
  methods: {
    // 切换分页
    async change(e) {
      const { data: res } = await this.$http(
        `/cloudsearch?keywords=${
          this.searchName
        }&type=1&limit=${this.limit}&offset=${(e - 1) * this.limit}`
      )
      if (res.code !== 200) return this.$message.error('暂无视频')
      this.songs = res.result.songs
    },

    async search() {
      const { data: res } = await this.$http.get(
        `/cloudsearch?keywords=${this.searchName}&type=1&limit=${this.limit}`
      )
      if (res.code !== 200) return this.$message.error('搜索失败')
      this.songs = res.result.songs
      // 总数传到vuex
      this.$store.commit('search/getsongCount', res.result.songCount)
      // 分页多少条
      this.total = Number((res.result.songCount / 30).toFixed(0) + '0')
    },

    getid(id, name, item) {
      //获取歌曲di 传递到video 进行播放

      this.$store.commit('song/getpic', item.al.picUrl) //把图片地址存到 x
      this.$http
        .get(`/song/url?`, {
          params: {
            id,
          },
        })
        .then((res) => {
          var url = res.data.data[0].url
          this.$store.commit('song/getsong', url)
          this.$store.state['song/name'] = name
        })
    },
  },
  filters: {
    time(v) {
      return moment(v).format('mm:ss')
    },
  },

  created() {
    this.searchName =  localStorage.getItem('searchname')
    this.search()
    this.$store.commit('search/getsearchlist', this.$route.meta.title)
    // if(this.$store.state.search.searchName === ''){
      
    // }
  },
  updated() {
    if(this.$store.state.search.searchName) {
      // this.search()
    }
  },
}
</script>

<style lang='less' scoped>
.username {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album {
  width: 156px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.next {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}

.name:hover {
  color: #0c73c2;
  text-decoration: underline;
}

.name {
  width: 130px;
  margin-right: 20px;
}

.set {
  width: 96px;
  margin-right: 14px;
  visibility: hidden;
}

li:hover .set {
  visibility: unset;
}

.set a:nth-child(1):hover {
  background-position: -17px -700px;
}

.set a:nth-child(2):hover {
  background-position: -20px -174px;
}

.set a:nth-child(3):hover {
  background-position: -20px -195px;
}

.set a:nth-child(4):hover {
  background-position: -100px -174px;
}

.set a:nth-child(1) {
  background-position: 5px -700px;
}

.set a:nth-child(2) {
  background: url('../../../assets/images/table.png') 0 -174px;
}

.set a:nth-child(3) {
  background: url('../../../assets/images/table.png') 0px -195px;
}

.set a:nth-child(4) {
  background: url('../../../assets/images/table.png')-77px -174px;
}

.set a {
  margin-right: 4px;
  width: 20px;
  height: 14px;
  display: inline-block;
  background: url('../../../assets/images/icon.png');
}

.mv {
  background: url('../../../assets/images/table.png') 0 -151px;
  display: inline-block;
  vertical-align: middle;
  width: 23px;
  height: 17px;
  margin-left: 5px;
}

li:hover {
  border: 1px solid #e1e1e1;
  background: #f2f2f2;
}
li > span {
  overflow: hidden;
}
ul {
  margin-top: 20px;
}

ul li:nth-child(even) {
  background: #f2f2f2;
}

li {
  width: 900px;
  padding: 10px 10px 8px 18px;
  border: 1px solid #fff;
  box-sizing: border-box;
  height: 43px;
  display: flex;
  align-items: center;
  position: relative;
}

.btn {
  background: url('../../../assets/images/table.png') no-repeat 0 -103px;
  display: inline-block;
  width: 17px;
  height: 17px;
  cursor: pointer;
  padding-left: 6px;
}
</style>
